<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>网站监控系统</title>
    <link rel="stylesheet" type="text/css" href="./static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="./static/admin/css/admin.css"/>
    <script src="./static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="./static/js/jquery-1.12.4.js"></script>
    <script src="./static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
            
    <script type="text/javascript" src="./static/js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="./static/js/my.js"></script>
</head>
<body>

<div class="wrap-container welcome-container">
    <div class="row">
        <div class="welcome-left-container col-lg-9">
            <div class="data-show">
                <ul class="clearfix">
                    <li class="col-sm-10 col-md-3 col-xs-10">
                        <a href="javascript:;" class="clearfix">
                            <div class="icon-bg bg-org f-l">
                                <span class="iconfont">&#xe606;</span>
                            </div>
                            <div class="right-text-con">
                                <p class="name">在监控网站</p>
                                <p><span id="site_num" class="color-org">正在加载</span>个</p>
                            </div>
                        </a>
                    </li>
                    <li class="col-sm-10 col-md-3 col-xs-10">
                        <a href="javascript:;" class="clearfix">
                            <div class="icon-bg bg-blue f-l">
                                <span class="iconfont">&#xe602;</span>
                            </div>
                            <div class="right-text-con">
                                <p class="name">当前网站最近7天故障次数</p>
                                <p><span id="alert_num" class="color-blue">正在加载</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="col-sm-10 col-md-3 col-xs-10">
                        <a href="javascript:;" class="clearfix">
                            <div class="icon-bg bg-blue f-l">
                                <span class="iconfont">&#xe602;</span>
                            </div>
                            <div class="right-text-con">
                                <p class="name">最近7天故障总时长</p>
                                <p><span id="alert_ts_num" class="color-blue">正在加载</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="col-sm-10 col-md-3 col-xs-10">

                        <form class="layui-form" action="/welcome.html">
                            <div class="layui-form-item">
                                <!--<label class="layui-form-label">选择框</label>-->
                                <div class="layui-inline">
                                    <select name="site" class="site">
                                        <option value="" class="color-blue">正在加载</option>
                                    </select>
                                </div>
                                <button class="layui-btn" lay-submit="search">选择</button>
                            </div>
                        </form>

                    </li>
                </ul>
            </div>
            <!--图表-->
            <div class="chart-panel panel panel-default">
                <div class="panel-body" id="chart" style="height: 376px;">
                </div>
            </div>
            <!--服务器信息-->
            <div class="server-panel panel panel-default">
                <div class="panel-header">服务器信息</div>
                <div class="panel-body clearfix">
                    <div class="col-md-2">
                        <p class="title">服务器环境</p>
                        <span class="info">Apache/2.4.4 (Win32) PHP/5.4.16</span>
                    </div>
                    <div class="col-md-2">
                        <p class="title">服务器IP地址</p>
                        <span class="info">127.0.0.1   </span>
                    </div>
                    <div class="col-md-2">
                        <p class="title">服务器域名</p>
                        <span class="info">localhost </span>
                    </div>
                    <div class="col-md-2">
                        <p class="title"> PHP版本</p>
                        <span class="info">5.4.16</span>
                    </div>
                    <div class="col-md-2">
                        <p class="title">数据库信息</p>
                        <span class="info">5.6.12-log </span>
                    </div>
                    <div class="col-md-2">
                        <p class="title">服务器当前时间</p>
                        <span class="info">2016-06-22 11:37:35</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="welcome-edge col-lg-3">
            <!--最新告警信息-->
            <div class="panel panel-default comment-panel">
                <div class="panel-header">最新告警信息</div>
                <div class="panel-body">
                    <div class="commentbox">
                        <ul class="commentList">
                            <li class="item cl">
                                <div class="comment-body">正在加载中。。。</div>
                            </li>
                        </ul>
                    </div>
                    <div id="pagesbox" style="text-align: center;padding-top: 5px;">
                    </div>
                </div>
            </div>
            <!--联系-->
            <div class="panel panel-default contact-panel">
                <div class="panel-header">联系我们</div>
                <div class="panel-body">
                    <p>QQ：1033313711</p>
                    <p>E-mail:1033313711@qq.com</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="./static/js/my.js"></script>

<script>
    var site = getUrlParam('site');
    var url_id = "";
    if (site) {
        // console.log(site);
        url_id = site;
        // renderForm();
    }

    //渲染网站列表
    layui.use('form', function () {
        $.ajax({
            "url": "/api/website",
            "type": "get",
            "dataType": 'json',
            xhrFields: {
                withCredentials: true
            },
            error: function () {
                alert("站点信息获取失败！");
            },
            success: function (data) {
                var data_len = data.data.length;

                //渲染在监控网站数
                $("#site_num").html(data_len);
                var form = layui.form();

                $.each(data.data, function (index, item) {
                    var is_select = false;
                    if ((url_id) && (url_id == item.url_id)) {
                        is_select = true;
                    } else if ((url_id == "") && (index < 1)) {
                        is_select = true;
                    }
                    if (is_select) {
                        get_alert(item.url_id);
                    }
                    $('.site').append(new Option(item.url, item.url_id, false, is_select));//往下拉菜单里添加元素
                });
                // 关键
                form.render();

            }
        });
    });

    // 渲染告警数据
    function get_alert(url_id) {
        // alert("应该获取预警信息的url"+url_id);
        $.ajax({
            "url": "/api/site/alert?url_id=" + url_id,
            "type": "get",
            "dataType": 'json',
            xhrFields: {
                withCredentials: true
            },
            error: function () {
                alert("站点信息获取失败！");
            },
            success: function (data) {
                console.log("站点预警信息");

                var data_len = data.data.length;
                console.log(data_len);
                if (data_len ==0){
                    $('#alert_num').html(0);
                }else{
                    $('#alert_num').html(data_len);
                }
                var alert_ts_num = 0;
                var alert_list_html = "";
                $.each(data.data, function (index, item) {
                    alert_ts_num += item.update_time - item.start_time
                    alert_list_html += '                            <li class="item cl">\n' +
                        '                                <header class="comment-header">\n' +
                        '                                    <div class="comment-meta">'+timeStamp2String(item.start_time)+" 持续到 "+timeStamp2String(item.update_time)+'</div>\n' +
                        '                                </header>\n' +
                        '                                <div class="comment-body">  【'+item.error+"】故障时长:"+item.keep_ts+'</div>' +
                        '                            </li>'

                });
                // console.log(alert_ts_num/1000/60/60);
                $('#alert_ts_num').html(Math.round(alert_ts_num / 1000 / 60 / 60) + "小时");
                $(".commentList").html(alert_list_html);

            }
        });

    }


</script>

<script type="text/javascript">
    //首页图表展示用

    var dom = document.getElementById("chart");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    // var base = +new Date(1968, 9, 3);
    // var oneDay = 24 * 3600 * 1000;
    // var date = [];
    //
    // // var data = [Math.random() * 300];
    // var data =  [];
    // // console.log(Math.random());
    // for (var i = 1; i < 20; i++) {
    // 	var now = new Date(base += oneDay);
    // 	// console.log([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    // 	// console.log(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    // 	date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    // 	data.push(Math.random());
    // 	// console.log(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    // }
    //
    // console.log(data);


    function timeStamp2String(time) {
        var datetime = new Date();
        datetime.setTime(time);
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1;
        var date = datetime.getDate();
        var hour = datetime.getHours();
        var minute = datetime.getMinutes();
        var second = datetime.getSeconds();
        // var mseconds = datetime.getMilliseconds();
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    };

    get_chart();
    var data1 = [];
    var date1 = [];

    function get_chart() {
        var url_id = "";
        var site = getUrlParam('site');
        var api_url = "/api/site/history";
        if (site) {
            api_url += "?url_id=" + site;
        }
        //站点列表信息
        $.ajax({
            "url": api_url,
            "type": "get",
            "dataType": 'json',
            xhrFields: {
                withCredentials: true
            },
            error: function () {
                alert("站点信息获取失败！");
            },
            success: function (d) {
                var data_len = d.data.length;
                for (const v of d.data) {
                    // console.log(v);
                    data1.push(v['duration']);
                    // date1.push(v['ts']);
                    date1.push(timeStamp2String(v['ts']));

                }
                // console.log(data1);
                // console.log(date1);
                // location.reload();
                option = {
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    title: {
                        left: 'center',
                        text: '最近7天网站访问延迟统计(秒)',
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: date1
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: data_len
                    }, {
                        start: 0,
                        end: data_len,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '访问延迟',
                            type: 'line',
                            smooth: true,
                            symbol: 'none',
                            sampling: 'average',
                            itemStyle: {
                                color: 'rgb(255, 70, 131)'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(255, 158, 68)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(255, 70, 131)'
                                }])
                            },
                            data: data1
                        }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        })
    }
</script>


</body>
</html>
